<template>
	<view class="notice">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed bg-bgcolor" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px'
			}">
				<view class="action">
					<!-- <text class="wlIcon-fanhui1" style="margin-left: 0;" @tap="$wanlshop.back(1)"></text> -->
					<!-- #ifdef MP -->
					<text class="wlIcon-shezhi" @tap="$wanlshop.to('/pages/user/setting/notice')"></text>
					<!-- #endif -->
				</view>
				<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					消息中心
				</view>
				<!-- #ifndef MP -->
				<view class="action">
					<text class="wlIcon-qingkong" @tap="empty()"></text>
					<text class="wlIcon-shezhi" @tap="$wanlshop.to('/pages/user/setting/notice')"></text>
				</view>
				<!-- #endif -->
			</view>
		</view>

		<view class="wanl-notice bg-bgcolor">
			<view class="tool">
				<view class="text-sm margin-right" v-if="statistics.notice.chat > 0">{{statistics.notice.chat}}条 未读消息
				</view>
				<view class="text-sm margin-right" v-else>没有未读消息</view>
				<!-- #ifdef MP -->
				<view class="text-sm" @tap="empty()">
					<view class="cu-tag round sm margin-right-xs wlIcon-qingkong"></view>全部已读
				</view>
				<!-- #endif -->
			</view>
			<view class="mode padding-bj">
				<view class="flex text-sm wanl-pip shadow-warp">

					<button class="logistics btnliveActivity" open-type="liveActivity"
						@click="btngo('/pages/notice/logistics/logistics')">
						<text class="wlIcon-wuliuqiache2"></text>
						交易物流
						<view class="cu-tag badge" v-if="statistics.notice.order != 0">{{statistics.notice.order}}
						</view>
					</button>
					<button class="notice btnliveActivity" open-type="liveActivity"
						@click="btngo('/pages/notice/notify/notify')">
						<text class="wlIcon-tongzhi"></text>
						通知消息
						<view class="cu-tag badge" v-if="statistics.notice.notice != 0">{{statistics.notice.notice}}
						</view>
					</button>
					<button class="Interaction btnliveActivity" open-type="liveActivity"
						@click="btngo('/pages/notice/system/system')">
						<text class="wlIcon-liuyan-fill"></text>
						系统消息
					</button>
				</view>
			</view>
		</view>

		<view class="wanl-msg" v-if="chat.list.length != 0">
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item, index) in chat.list" :key="index"
					@tap="toChat(item.id,'',item.user_id)" :class="modalName=='move-box-'+ item.id?'move-cur':''"
					@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
					:data-target="'move-box-' + item.id">
					<view class="cu-avatar round lg"
						:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.avatar, 100, 100) + ')' }"></view>
					<view class="content">
						<view class="wanl-black">{{item.name}}</view>
						<view class="wanl-gray text-sm flex">
							<view class="text-cut wanl-gray-light">
								{{item.content}}
							</view>
						</view>
					</view>
					<view class="action">
						<view class="text-gray text-sm">{{$wanlshop.timeToChat(item.createtime)}}</view>
						<view class="cu-tag bg-red" v-if="item.count > 0">{{item.count}}</view>
					</view>
					<view class="move">
						<view class="bg-red" @tap.stop="del(index)">删除本地</view>
					</view>
				</view>
			</view>
		</view>

		<wanl-empty src="notice_default3x" text="还没有任何消息" v-else />
		<view class="edgeInsetBottom"></view>
		<WXofficialAccount></WXofficialAccount>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				userInfo: uni.getStorageSync('wanlshop:user'),
			};
		},
		onShow() {
			let _this = this
			uni.getNetworkType({
				success: function(res) {
					console.log(res.networkType);
					if (res.networkType == 'none') {
						setTimeout(() => {
							_this.onshowMethods()
						}, 200)
						return
					} else {
						_this.onshowMethods()
					}

				}
			});


		},
		computed: {
			...mapState(['chat', 'statistics'])
		},
		onLoad() {
			if (this.userInfo && this.userInfo.token) {
				this.$store.dispatch('user/getWechatSubscribe');
			}
		},
		methods: {

			onshowMethods() {
				this.$store.dispatch('chat/start')

				this.$api.get({
					url: '/wanlshop/chat/lists',
					success: res => {
						let count = 0;
						res.forEach(item => {
							count += item.count;
						});
						this.setTabBarBadge(count)
					}
				})
			},
			async btngo(path) {
				const shouldProceed = await this.$wanlshop.setrequestSubscribeMessage([
					'qa9cVLAWtjZ-E3DB54wlgje0JqOFLH667pr2cZqy80w',
				])
				if (shouldProceed) {
					this.$wanlshop.to(path)
				}
			},
			setTabBarBadge(num) {
				let count = ''
				if (num == 0) {
					return
				} else if (num > 99) {
					count = '99+'
				} else {
					count = num + ''
				}
				if (count == 0 || count == '0') {
					return
				}
				uni.setTabBarBadge({
					index: 1,
					text: count,
					complete(e) {}
				});
			},
			...mapActions({
				del: 'chat/del', // 删除消息记录
				empty: 'chat/empty', // 清空角标
			}),
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	};
</script>

<style>
	.btnliveActivity {
		height: 160rpx;
		display: flex;
		flex-direction: column;
		border: #fff;
		padding: 0;
		margin: 0;
		font-size: 26rpx;
		color: #808080;
		line-height: 38rpx;
		background: transparent;
	}

	.btnliveActivity::after {
		display: none;
	}

	.cu-bar .search-form {
		background-color: #f2f2f2;
	}

	/* #ifdef MP */
	.cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */
</style>